<template>
    <div>
        <div class="header">
            <p>温馨提示:当前商品由第三方物流配送，预计2~5天达!</p>
        </div>
        <div class="box" ref="box" v-show="getCartIfo.length">
             <div>
                 <div class="productlist" v-for="(item,index) in getCartIfo" :key="index">
                <div class="empty">
                    <van-checkbox v-model="checked" checked-color="#ee0a24"></van-checkbox>
                </div>
                <div class="goods">
                    <a href="#">
                        <img :src="item.ItemImagePath" @click="handelDetail(item)">
                    </a>
                    <h2>{{item.VariantName}}</h2>
                    <div class="sBox">
                        <button @click="handleCount(0,item)">-</button>
                        <input type="text"  :value="item.itemNum">
                        <button @click="handleCount(1,item)">+</button>
                    </div>
                    <h3>￥{{item.NowPrice*item.itemNum}}</h3>
                </div>
            </div>
             </div>
        </div>
        <van-submit-bar @submit="handlePay" :price="totalPrice*100" button-text="提交订单" />
    </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    export default {
        data(){
            return{
                checked: true,
                totalPrice:0
            }
        },
        computed: {
            getCartIfo() {//获取购物车商品信息
                return  this.$store.getters['cart/getCartIfo'] 
            }
        },
        created () {
            this.getCartIfo.forEach(item=>{
                this.totalPrice+=item.NowPrice*item.itemNum
            });
        },
        methods: {
            handleCount(bol,item) {//修改购物车中某一商品的数量
                this.$store.commit('cart/changeCartNum',{bol,item})
            },
            handelDetail(item){
                this.$router.push({
                    path:'/detail',
                    query:{
                        item
                    }
                })
            },
            handlePay(){
                this.$router.push('/pay')
            }
        },
        watch: {//监听购物车的
            getCartIfo:{
                handler(newValue){
                    this.totalPrice=0
                    newValue.forEach(item=>{
                    this.totalPrice+=item.NowPrice*item.itemNum
                    })
                },
                deep:true
            }
        },
        mounted () {
             new BScroll('.box', {
                probeType: 3,
                scrollY: true,
                click:true
            });
        },
    }
</script>
<style scoped lang="css" src="../assets/css/cart.css"></style>
<style scoped lang="css" src="../assets/css/reset.css"></style>
<style lang="scss" scoped>
/deep/.van-submit-bar__bar{
    margin-bottom: 50px;
}
</style>